<template>
    <a-spin :spinning="confirmLoading">
        <j-form-container :disabled="formDisabled">
            <!-- 主表单区域 -->
            <a-form :form="form" slot="detail">
                <a-row>
                    <a-col :span="24">
                        <a-form-item label="集装箱号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['containerNo', validatorRules.containerNo]"
                                placeholder="请输入集装箱号"></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="入库时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-date placeholder="请选择入库时间"
                                v-decorator="['inOrderTime', validatorRules.inOrderTime]"
                                :trigger-change="true" style="width: 100%" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="入库库区" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-dict-select-tag v-decorator="['area', validatorRules.area]"
                                placeholder="请选择入库库区" :trigger-change="true"
                                dictCode="basic_warehouse,warehouse_name,warehouse_code" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="品番类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-dict-select-tag :trigger-change="true" @change="goodsTypeChange"
                                v-decorator="['goodsType', validatorRules.goodsType]"
                                placeholder="请选择品番类型" dictCode="goods_type" />
                        </a-form-item>
                    </a-col>
                    <!-- <a-col :span="24">
                        <a-form-item label="批次号" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['batchNumber']" placeholder="请输入批次号"></a-input>
                        </a-form-item>
                    </a-col> -->
                    <a-col :span="24" v-if="model.status >= 3">
                        <a-form-item label="理货员" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['tally']" disabled></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24" v-if="model.status >= 3">
                        <a-form-item label="理货任务领取时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-date :show-time="true" disabled date-format="YYYY-MM-DD HH:mm:ss"
                                v-decorator="['tallyReceive']" :trigger-change="true"
                                style="width: 100%" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="24" v-if="model.status >= 4">
                        <a-form-item label="理货任务完成时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-date :show-time="true" disabled date-format="YYYY-MM-DD HH:mm:ss"
                                v-decorator="['tallyTime']" :trigger-change="true"
                                style="width: 100%" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="24" v-if="model.status >= 5 && model.area === 'G'">
                        <a-form-item label="叉车司机" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['driver']" disabled></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24" v-if="model.status >= 5 && model.area === 'G'">
                        <a-form-item label="上架任务领取时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-date :show-time="true" disabled date-format="YYYY-MM-DD HH:mm:ss"
                                v-decorator="['driverReceive']" :trigger-change="true"
                                style="width: 100%" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="24" v-if="model.status === 6 && model.area === 'G'">
                        <a-form-item label="上架任务完成时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <j-date :show-time="true" disabled date-format="YYYY-MM-DD HH:mm:ss"
                                v-decorator="['driverTime']" :trigger-change="true"
                                style="width: 100%" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="备注信息" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-input v-decorator="['remarks']" placeholder="请输入备注信息"></a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </j-form-container>
        <!-- 子表单区域 -->
        <a-tabs v-model="activeKey" @change="handleChangeTabs">
            <a-tab-pane tab="入库单明细表" :key="refKeys[0]" :forceRender="true">
                <j-editable-table :ref="refKeys[0]" :loading="inOrderDetailTable.loading"
                    :columns="inOrderDetailTable.columns"
                    :dataSource="inOrderDetailTable.dataSource" :maxHeight="300"
                    :disabled="formDisabled" :rowNumber="true" :rowSelection="true"
                    :actionButton="true" />
            </a-tab-pane>
        </a-tabs>
        <a-row v-if="showFlowSubmitButton"
            style="text-align: center;width: 100%;margin-top: 16px;"><a-button @click="handleOk">提
                交</a-button></a-row>
    </a-spin>
</template>

<script>

import pick from 'lodash.pick'
import { getAction } from '@/api/manage'
import { FormTypes, getRefPromise } from '@/utils/JEditableTableUtil'
import { JEditableTableMixin } from '@/mixins/JEditableTableMixin'

export default {
    name: 'InOrderForm',
    mixins: [JEditableTableMixin],
    components: {},
    data() {
        return {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },
            labelCol2: {
                xs: { span: 24 },
                sm: { span: 3 }
            },
            wrapperCol2: {
                xs: { span: 24 },
                sm: { span: 20 }
            },
            // 新增时子表默认添加几行空数据
            addDefaultRowNum: 1,
            validatorRules: {
                containerNo: {
                    rules: [
                        { required: true, message: '请输入订单号!' }
                    ]
                },
                inOrderTime: {
                    rules: [
                        { required: true, message: '请输入入库时间!' }
                    ]
                },
                area: {
                    rules: [
                        { required: true, message: '请输入入库库区!' }
                    ]
                },
                goodsType: {
                    rules: [
                        { required: true, message: '请选择品番类型!' }
                    ]
                }
            },
            refKeys: ['inOrderDetail'],
            tableKeys: ['inOrderDetail'],
            activeKey: 'inOrderDetail',
            // 入库单明细表
            inOrderDetailTable: {
                loading: false,
                dataSource: [],
                columns: [
                    {
                        title: '品番编码',
                        key: 'skuCode',
                        type: FormTypes.input,
                        width: '200px',
                        placeholder: '请输入${title}',
                        defaultValue: ''
                    },
                    {
                        title: '入库箱数（箱）',
                        key: 'boxNumber',
                        type: FormTypes.inputNumber,
                        width: '200px',
                        placeholder: '请输入${title}',
                        defaultValue: ''
                    },
                ]
            },
            url: {
                add: '/inOrder/inOrder/add',
                edit: '/inOrder/inOrder/edit',
                queryById: '/inOrder/inOrder/queryById',
                inOrderDetail: {
                    list: '/inOrder/inOrder/queryInOrderDetailByMainId'
                }
            }
        }
    },
    props: {
        //流程表单data
        formData: {
            type: Object,
            default: () => {
            },
            required: false
        },
        //表单模式：false流程表单 true普通表单
        formBpm: {
            type: Boolean,
            default: false,
            required: false
        },
        //表单禁用
        disabled: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    computed: {
        formDisabled() {
            if (this.formBpm === true) {
                if (this.formData.disabled === false) {
                    return false
                }
                return true
            }
            return this.disabled
        },
        showFlowSubmitButton() {
            if (this.formBpm === true) {
                if (this.formData.disabled === false) {
                    return true
                }
            }
            return false
        }
    },
    created() {
        //如果是流程中表单，则需要加载流程表单data
        this.showFlowData()
    },
    methods: {
        // // 根据品番类型控制填写字段
        // goodsTypeChange(e){
        //     if (e == 1) {
        //         this.$set(this.inOrderDetailTable.columns, 2, {
        //                 title: '客户名称',
        //                 key: 'customerName',
        //                 type: FormTypes.input,
        //                 width: "200px",
        //                 placeholder: '请输入${title}',
        //                 defaultValue: '',
        //             })
        //             this.$set(this.inOrderDetailTable.columns, 3, {
        //                 title: '客户品番',
        //                 key: 'customerSkuCode',
        //                 type: FormTypes.input,
        //                 width: "200px",
        //                 placeholder: '请输入${title}',
        //                 defaultValue: '',
        //             })
        //     } else {
        //         this.$delete(this.inOrderDetailTable.columns, 3)
        //         this.$delete(this.inOrderDetailTable.columns, 2)
        //     }
        // },
        areaInput(e) {
            this.form.setFieldsValue({
                'area': e
            })
        },
        addBefore() {
            this.form.resetFields()
            this.inOrderDetailTable.dataSource = []
        },
        getAllTable() {
            let values = this.tableKeys.map(key => getRefPromise(this, key))
            return Promise.all(values)
        },
        /** 调用完edit()方法之后会自动调用此方法 */
        editAfter() {
            // 为入库日期赋默认值（默认当天）
            if (!this.model.id) {
                this.form.setFieldsValue({ inOrderTime: new Date().toISOString().slice(0, 10) })
            }

            let fieldval = pick(this.model, 'inOrderCode', 'containerNo', 'inOrderTime', 'area', 'goodsType', 'remarks', 'status', 'tally', 'stationCode', 'tallyReceive', 'tallyTime', 'driver', 'driverReceive', 'driverTime')
            this.$nextTick(() => {
                this.form.setFieldsValue(fieldval)
            })
            // 加载子表数据
            if (this.model.id) {
                let params = { id: this.model.id }
                this.requestSubTableData(this.url.inOrderDetail.list, params, this.inOrderDetailTable)
            }
        },
        /** 整理成formData */
        classifyIntoFormData(allValues) {
            let main = Object.assign(this.model, allValues.formValue)
            return {
                ...main, // 展开
                inOrderDetailList: allValues.tablesValue[0].values
            }
        },
        //渲染流程表单数据
        showFlowData() {
            if (this.formBpm === true) {
                let params = { id: this.formData.dataId }
                getAction(this.url.queryById, params).then((res) => {
                    if (res.success) {
                        this.edit(res.result)
                    }
                })
            }
        },
        validateError(msg) {
            this.$message.error(msg)
        },
        popupCallback(row) {
            this.form.setFieldsValue(pick(row, 'inOrderCode', 'containerNo', 'inOrderTime', 'area', 'goodsType', 'remarks', 'status', 'tally', 'stationCode', 'tallyReceive', 'tallyTime', 'driver', 'driverReceive', 'driverTime'))
        }

    }
}
</script>

<style scoped></style>